<template>
  <div class="home-container">
    <div class="layout-container">
      <!-- 左侧区域树 -->
      <AreaTree
        v-model:searchText="searchText"
        v-model:selectedKeys="selectedKeys"
        v-model:expandedKeys="expandedKeys"
        :tree-data="treeData"
        @select="onSelect"
      />

      <!-- 右侧内容区域 -->
      <div class="right-content">
        <!-- 顶部卡片 -->
        <div class="content-card top-card">
          <HeaderSection
            :current-city="currentCity"
            v-model:selected-year="selectedYear"
          />

          <!-- 统计卡片区域 -->
          <StatCards
            :show-task-detail="showTaskDetail"
            @card-click="handleCardClick"
          />
        </div>

        <!-- 表格卡片 -->
        <DataTable
          :columns="columns"
          :data-source="tableData"
          :pagination="pagination"
          @name-click="handleNameClick"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import AreaTree from './components/AreaTree.vue'
import HeaderSection from './components/HeaderSection.vue'
import StatCards from './components/StatCards.vue'
import DataTable from './components/DataTable.vue'

const router = useRouter()
const searchText = ref('')
const selectedYear = ref(dayjs('2024'))
const currentCity = ref('宁波市')
const selectedKeys = ref<string[]>([])
const expandedKeys = ref<string[]>(['ningbo'])
const showTaskDetail = ref(false)

// 树形数据
const treeData = [
  {
    title: '宁波市',
    key: 'ningbo',
    children: [
      {
        title: '海曙区',
        key: 'haishu',
        children: [
          {
            title: '段塘街道丽茂片区',
            key: 'duangtang1',
          },
          {
            title: '段塘街道启运片区',
            key: 'duangtang2',
          },
        ],
      },
      // ... 其他数据保持不变
    ],
  },
]

// 列属性和表格数据保持不变
const columns = [
  {
    title: '序号',
    dataIndex: 'id',
    width: 80,
    align: 'center'
  },
  {
    title: '片区名称',
    dataIndex: 'name',
    align: 'left',
    width: 200
  },
  {
    title: '任务完成率',
    dataIndex: 'completion',
    align: 'right',
    width: 120
  },
  {
    title: '全市排名',
    dataIndex: 'rank',
    align: 'center',
    width: 100
  },
  {
    title: '任务总数',
    dataIndex: 'totalTasks',
    align: 'center',
    width: 100
  },
  {
    title: '常态化任务',
    dataIndex: 'regularTasks',
    align: 'center',
    width: 120
  },
  {
    title: '阶段性任务',
    dataIndex: 'phaseTasks',
    align: 'center',
    width: 120
  }
]

const tableData = [
  {
    key: '1',
    id: 1,
    name: '段塘街道丽茂欣片区',
    completion: '28.57',
    rank: 1,
    totalTasks: 42,
    regularTasks: 29,
    phaseTasks: 13,
  },
  {
    key: '2',
    id: 2,
    name: '段塘街道启运片区',
    completion: '0.00',
    rank: 2,
    totalTasks: 21,
    regularTasks: 21,
    phaseTasks: 0,
  },
  {
    key: '3',
    id: 3,
    name: '江厦街道新街片区',
    completion: '0.00',
    rank: 3,
    totalTasks: 12,
    regularTasks: 12,
    phaseTasks: 0,
  },
  {
    key: '4',
    id: 4,
    name: '江厦街道天一一南苑片区',
    completion: '0.00',
    rank: 4,
    totalTasks: 8,
    regularTasks: 8,
    phaseTasks: 0,
  },
  {
    key: '5',
    id: 5,
    name: '江厦街道南苑安里片区',
    completion: '0.00',
    rank: 5,
    totalTasks: 8,
    regularTasks: 8,
    phaseTasks: 0,
  },
  {
    key: '6',
    id: 6,
    name: '江厦街道天子村片区',
    completion: '0.00',
    rank: 6,
    totalTasks: 12,
    regularTasks: 12,
    phaseTasks: 0,
  },
  {
    key: '7',
    id: 7,
    name: '荪山街道城西共富美工会发展片区',
    completion: '0.00',
    rank: 7,
    totalTasks: 8,
    regularTasks: 8,
    phaseTasks: 0,
  },
  {
    key: '8',
    id: 8,
    name: '荪山街道城中核心商圈工会片区',
    completion: '0.00',
    rank: 8,
    totalTasks: 8,
    regularTasks: 8,
    phaseTasks: 0,
  }
]

// 添加分页器配置
const pagination = {
  total: 36,
  pageSize: 10,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `合计: ${total}条`,
  locale: zhCN.Pagination
}

// 处理方法
const onSelect = (selectedKeys: string[], info: any) => {
  if (selectedKeys.length > 0) {
    const node = info.node
    currentCity.value = node.title
  }
}

const handleNameClick = (record: any) => {
  router.push(`/detail/${record.key}`)
}

const handleCardClick = (type: string) => {
  if (type === 'tasks') {
    showTaskDetail.value = !showTaskDetail.value
  }
}
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  background: #f0f2f5;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.layout-container {
  display: flex;
  gap: 24px;
  flex: 1;
  min-height: calc(100vh - 48px);
}

.right-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: calc(100vh - 48px);
}

.content-card {
  background: white;
  border-radius: 8px;
  padding: 24px;
}

.top-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
</style> 